<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fn1() {
				// 返回文档中与指定选择器或选择器组匹配的第一个 Element对象
				var div = document.querySelector(".dv");
				// 返回与指定的选择器组匹配的文档中的元素列表(数组)
				div = document.querySelectorAll(".dv");
				console.log(div[1].innerHTML);
				div[1].innerHTML = "29期"
			}

			function fn2() {
				//返回一个包含了所有指定类名的子元素的类数组对象
				var div = document.getElementsByClassName("dv");
				console.log(div[0].innerHTML);
				div[0].innerHTML = "29期"
			}

			function fn3() {
				//返回一个匹配特定 ID的元素
				var div = document.getElementById("d3");
				div.innerHTML = "29期666";
			}

			function fn4() {
				//返回一个包括所有给定标签名称的元素的 HTML 集合
				var div = document.getElementsByTagName("a");
				console.log(div[0].innerHTML);
				div[0].innerHTML = "测试 开发 培训"
			}
		</script>
	</head>
	<body>
		<div class="dv">博为峰</div>
		<div class="dv">学掌门</div>
		<div id="d3">29期</div>
		<a href="https://www.atstudy.com">学掌门</a>
		<button onclick="fn1()">querySelector|querySelectorAll</button>
		<button onclick="fn2()">getElementsByClassName</button>
		<button onclick="fn3()">getElementById</button>
		<button onclick="fn4()">getElementsByTagName</button>
	</body>
</html>
